/* 设置顶部容器 */
.top-bar-wrapper{
       width: 100%;
       height: 40px;
       line-height: 40px;
       background-color: #333;
       

}

.top-bar{
    width: 1226px;
    height: 40px;
    margin: 0 auto;
}

.section, .top-bar li{
    float: left;
}

.shop-cart, .user-info{
    float: right;
}

.top-bar a{color: #b0b0b0;
font-size: 12px;
display: block;
height: 40px;

}

.top-bar a:hover{
    color: white;
}

.top-bar .line{font-size: 12px;
    color: #424242;
margin: 0 7px;}

.app{
    position: relative;
}

.app:hover .qrcode,
.app:hover::after{
    display: block;
    height: 148px;
}

/* 设置APP下的小三角形 */
.app::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: white;
    left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   display: none;
}

/* 设置二维码 */
.qrcode{
    width: 124px;
    height: 0px;
    overflow: hidden;
    background-color: white;
    /* 设置Line-heigh为1是因为里面的文字继承了祖先的line-height为40，文字会跑出框去 */
    line-height: 1;
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    text-align: center;
    /* 二维码不应该在父元素中占据定位，所以开绝对定位 */
    position: absolute;
    left:-40px;
    z-index: 999;
    /* 已经用高度为零进行隐藏了 */
    /* display: none; */
    transition: height 0.3s;

   
} 


 .qrcode img{width: 90px;
height: 90px;
margin: 17px;
margin-bottom: 10px;
} 

.qrcode span{
    font-size: 14px;
    color: black;
    } 


/* 设置购物车 */
.shop-cart a{width: 120px;
    margin-left: 25px;
    background-color: #424242;
    text-align:center;
    position: relative;
} 



.shop-cart .cart{
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    /* 不设置默认是透明，会看见下一层的内容  */
    background-color: white;
    width: 316px;
    height: 0;
    overflow: hidden;
    line-height: 152px;
    position: absolute;
    right: 0;
    text-align: center;
    color: black;
    /* display: none; */
    transition: height .3s;
    z-index: 999;
}

.shop-cart a:hover .cart{height: 152px;}
   
.shop-cart a:hover{background-color: white;
                   color: #FF6A00;
}


/* 设置头部容器 */
.header-wrapper{position: relative;

}

.header{height: 100px;
/* background-color: #bfa; */
}

/* 设置头部Logo */
.header .logo{
    float: left;
    margin-top: 22px;
    width: 55px;
    height: 55px;
    position: relative;
    overflow:hidden ;
    text-indent: -9999px;
    
    
}

.header .logo a{
    position: absolute;
    width: 55px;
    height: 55px;
    left: 0;
    background-color: #FF6700;
    /* 用了position, a元素就可以设置宽高了，不用再设置display:block
    display: block; */
    background-image: url(../img/mi-logo.png);
    background-position: center;
    
    transition: left .3s;
   
    

}
    
    .header .logo .home{
        background-image: url(../img/mi-home.png);
        /* 让home隐藏 */
        left: -55px;
    }

    .header .logo:hover .mi{
        left: 55px;
    } 

    .header .logo:hover .home{
        left: 0px;
    } 


    /* 设置中间的导航条 */

    .header .nav-wrapper{
        float: left;
        margin-left: 7px;
    }

    .header .nav{height: 100px;
        line-height: 100px;
        padding-left: 58px;

    }

    .nav>li{float: left;}

    .nav-wrapper li a{
        display: block;
        font-size: 16px;
        margin-right: 20px;
    }

    .nav-wrapper li a:hover{
        color:#FF6700
    }

    .nav-wrapper .all-goods{visibility: hidden;}

    /* 设置左侧菜单栏 */

    .all-goods-wrapper{position: relative;}

   .left-menu{
       
       width: 234px;
       /* 上下边距有40了，要减掉 */
       height: 420px;
       padding: 20px 0;
       background-color: rgba(0, 0, 0, .6);
       position: absolute;
       left: -120px;
       z-index: 999;
       line-height: 1;

   }

   ul .left-menu li a{
         display: block;
         height: 42px;
         line-height: 42px;
         color: white;
         padding: 0 30px;
         margin-right: 0;
         font-size: 14px;

   }

   ul .left-menu li a:hover{
       color: white;
       background-color: #FF6700;
   }

   .left-menu a i{
       float: right;
       line-height: 42px;
   }

  /* 设置导航栏的下拉框 */
    .nav .goods-info{
        height: 0;
        overflow: hidden;
        width: 100%;
        background-color: white;
           position: absolute;
           left: 0;
           top:100px;
           transition: height .3s;
           z-index: 9999;
        }
          
    
    .nav .show-goods:hover~.goods-info,
    .nav .goods-info:hover{
        height: 228px;
        border-top: 1px solid rgb(224, 224, 224);
        box-shadow: 0 2px 3px rgba(0, 0, 0, .2);}

        /* 设置搜素框的容器 */

        .search-wrapper{
               height: 50px;
               width:296px ;
               float: right;
               margin-top: 25px;

        }

        .search-wrapper .search-inp{
            float: left;
                   box-sizing: border-box;
                   width: 244px;
                   height: 50px;
                   border: 1px #E0E0E0 solid;
                   border-right: none;
                   padding: 0 10px;
                   font: 16px;
                   /* 设置之后获取焦点才不会有边框 */
                   outline: none;

        }

        .search-wrapper .search-inp:focus,
        .search-wrapper .search-inp:focus+button{
            border-color: #FF6700;
        }

        .search-wrapper .search-btn{
            float: left;
            box-sizing: border-box;
                   width: 52px;
                   height: 50px;
                   border: 1px #E0E0E0 solid;
                   background-color: white;
                   color: #616161;
                   font-size: 18px;

        }

        /* 设置搜素框获取焦点后的变化 */
        .search-wrapper .search-btn:hover{
            background-color: #FF6700;
            color: white;
            border: none;}

            /* 设置banner */
    .banner{position: relative;
        height: 460px;

    }

    .banner .img-list li{
        position: absolute;
        
    }

    .banner img{
        /* 设置图片宽度，高度也跟着确定了 */
        width: 100%;
        vertical-align: top;
    }

    /* 设置5个导航点 */
    .pointer{
        position: absolute;
        right: 35px;
        bottom: 22px;
    }

    .pointer a{
       float: left;
       width: 12px;
       height: 12px;
       border: 2px solid rgba(255, 255, 255, 0.4);
       border-radius: 50%;
       background-color: rgba(0, 0, 0, .4);
       margin-left: 6px;

    }

    .pointer a:hover,
    .pointer a.active{
        background-color: rgba(255, 255, 255, 0.4);
        border-color: rgba(0, 0, 0, .4); ;
    }

    /* 设置两个箭头 */
    .prev-next a{
        width: 41px;
        height: 69px;
        background-image: url(../img/icon-slides.png);
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    .prev-next .prev{
        left: 234px;
        background-position: -84px 0;
    }

    .prev-next .prev:hover{
        background-position: 0 0;
    }

    .prev-next .next{
        right: 0;
        background-position: -125px 0;
    }

    .prev-next .next:hover{
        background-position: -42px 0;
    }

    /* 设置回到顶部的元素 */
    .back-top{
        width: 26px;
        height: 206px;
        background-color: orange;
        /* 开启固定定位，此时相对于视口进行定位 */
        position: fixed;
        bottom: 60px;
        right: 50%; /*将right值设置为视口宽度的50%*/
        /* 中间框宽度(1226px)的一半，再加上本身的宽度26px ,元素就会右移到如图位置*/
        margin-right: -639px;

        /* 
        布局的等式
            left + margin-left + width + margin-right + right = 视口的宽度

            auto + 0 + 26 + 0 + 60 = 视口宽度

            auto + 0 + 26 + -639px + 50% = 视口宽度
    */

    }

    /* 设置下部广告栏 */
    .ad{
        height: 170px;
        width: 1226px;
        margin: 14px auto 0;
       
    }

   .ad .shortcut,
   .ad .imgs,
   .ad li
   {
       float: left;
    }

    .ad .shortcut{width: 228px;
        height: 168px;
        margin-right: 14px;
        background-color: #5F5750;
        padding-top: 2px;
        padding-left: 6px;

    }

    .ad .shortcut li{
            position: relative;
        }

            .ad .shortcut li::before{
                 content: "";
                 position: absolute;
                 width: 64px;
                 height: 1px;
                 background-color: #665e57;
                 left: 0;
                 right: 0;
                 top: 0;
                 margin: 0 auto;
            }

            .ad .shortcut li::after{
                content: "";
                position: absolute;
                width: 1px;
                height: 70px;
                background-color: #665e57;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto 0;
           }

    .ad .shortcut a{
               color: #CFCCCA;
               display: block;
               height: 84px;
               width: 76px;
               text-align: center;
               font-size: 12px;
               
}

.ad .shortcut a:hover{
    color: #fff;
}

/* .ad .shortcut a:hover{color: white}; */


        .ad .shortcut i{
            display: block;
            font-size: 22px;
            padding-top: 21px;
            padding-bottom: 3px;
        }
    
    /* 设置右侧图片 */
    .ad .imgs li{
          width: 316px;
          margin-right: 15px;
    }

    .ad .imgs li:last-child{
        margin-right: 0;
    }

    .ad .imgs img{
        width: 100%;
        vertical-align: top;
        
        
    }

    